<template>
	<div class="flowerspeak">
		<header>
			<ul>
				<li :class="classname1" @click="change1">广场</li>
				<li @click="change2" :class="classname2">关注</li>
				<span class="line"></span>	
			</ul>
		</header>
		<div class="main">
			<!-- <transition enter-active-class="animated fadeOutLeft" leave-active-class="animated fadeInRight"> -->
				<component :is="flag">
				</component>
			<!-- </transition> -->
		</div>
	</div>
</template>
<style type="text/css" lang="less" scoped>
	header{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 40px;
		line-height: 40px;
		border-bottom: 0.2px solid 	#EAEAEA;
		background: #fff;
		ul{
			width: 190px;
			margin: 0 auto;
			overflow: hidden;
			position: relative;
			z-index: 99;
				li{
				float: left;
				width: 50%;
				text-align: center;
				position: relative;
			}
		}	
		.active-li{
			color: #008B8B;
		}
		.line{
			position: absolute;
			bottom: 0;
			height: 2px;
			display: block;
			width: 50px;
			left:20px;
			transition: all .2s linear;
			background: #008B8B;
		}
	}
</style>

<script type="text/javascript">
	import gcmin from './gcmin'
	import gzmin from './gzmin'
	
	export default{
		data(){
			return{
				flag:"gcmin",
				classname1:"active-li",
				classname2:"",
				line:"",
				gcminel:'',
				gzminel:''
			}
		},
		components:{
			gcmin,
			gzmin
		},
		methods:{
			change1(){
				this.flag='gcmin';
				this.classname1="active-li";
				this.classname2="";
				this.line.style.left="20px";
			},
			change2(){
				this.flag='gzmin';
				this.classname1="";
				this.classname2="active-li";
				this.line.style.left="115px";
			}
		},
		mounted(){	
			var line=document.getElementsByClassName("line")[0];
			this.line=line;
		}
	}
</script>